<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{books}}
        <ul>
            <li v-for="item in books">
                书本数量是<input type="text" v-model.number="item.count">{{item.count}}
                书本名称是{{item.bookName}}
                书本价格是{{item.count*item.price}}
                <button @click="item.count++">click</button>
            </li>
        </ul>
        书本总数是{{bookTotal}}
        书本总价是{{bookPriceTotal}}

    </div>

    <script src="js/vue.js"></script>

    <script>
        let myApp = new Vue({
            el:'#app',
            data:{
                name:'tom',
                msg:'',
                books:[
                    {bookName:'html',count:0,price:8},
                    {bookName:'css',count:0,price:10},
                    {bookName:'java',count:0,price:13},
                    {bookName:'javascript',count:0,price:21}

                ]
            },
            //计算属性
            computed:{
                //变量来使用
                bookTotal(){
                    return this.books.reduce((prev,next)=>{
                        return prev + next.count
                    },0)
                },
                bookPriceTotal(){
                    return this.books.reduce((prev,next)=>{
                        return prev + (next.price * next.count)
                    },0)
                }
            }
        })
    </script>


</body>
</html>